import React, { Component, PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as Actions from '../../actions/user'
import utils from '../../utils'
import Header from '../../components/Header'
import MeScrollContainer from '../../components/MeScroll'
import { Toast ,Checkbox} from 'antd-mobile';


const CheckboxItem = Checkbox.CheckboxItem;
class AccountEdit extends Component{
  static contextTypes={
    router:PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props);
    this.state = {
      true_name:'',
      mobile:''

    }
  }

  componentWillMount(){

  }

  componentDidMount(){
    let { actions } =this.props 
    let userId=localStorage.getItem('userId')
    if(userId <= 0)
    {
      Toast.fail("You haven't landed yet")
      this.context.router.history.push('/login')
      return
    }
    actions.getUserInfo({user_id:userId},{ callback:(res)=>{
      if(res.code ==200){
        this.setState({
          ...res.data
        })
      }
        
    }})
    
    
    
  }
  onTextChange(type,e){
    this.setState({
      [type]:e.target.value
    })
  }
  submit(){
    let {actions,params} =this.props
    let {true_name,mobile,sex,email} =this.state
    let validateList=[
    {
      text:'Please enter the full name',
      type:'empty',
      data:true_name
    },
    {
      text:'Please enter the mobile',
      type:'empty',
      data:mobile
    },
    
    ]
    if(!utils.validate(validateList))
      return
    let data={
      user_id:localStorage.getItem('userId'),
      true_name,
      mobile, 
      sex,
      email
    }
    actions.updateUserInfo(data,{callback:(res) =>{
      if(res.code ==200){
        Toast.info('update accout successful')
          this.context.router.history.goBack()
        }
      }})
      
      
    
  }
  onChange(v){
    this.setState({
      ['sex']:v
    })
    
  }
 
 

  render(){
   let {true_name,mobile,sex,email} =this.state
    return(
        <div >
        <Header title={'Your Account'} leftBtn={true} leftBtnTouch={()=>{
          this.context.router.history.goBack()
        }}/>
        <MeScrollContainer prefixcls='common-container'>
           <div className='account-container '>
            <div className='input-item'>
              <span className='s1'>Name:</span>
              <input value={true_name} onChange={this.onTextChange.bind(this,'true_name')} type="text" className='s2' />
            </div>
            <div className='input-item'>
              <span className='s1'>Mobile Number:</span>
              <input value={mobile} onChange={this.onTextChange.bind(this,'mobile')} type="text" className='s2' />
            </div>
            <div className='input-item'>
              <span className='s1'>Email:</span>
              <input value={email} onChange={this.onTextChange.bind(this,'email')} type="text" className='s2' />
            </div>
            <div className='input-item'>
              <span className='s1'>Sex:</span>
              <div className='my-radio'>
                <Checkbox checked={sex==1?true:false} onChange={() => this.onChange(1)}>man</Checkbox>
                <Checkbox checked={sex==0?true:false} onChange={() => this.onChange(0)}>woman</Checkbox>
               
              </div>
              
            </div>
            </div>
        </MeScrollContainer>
         <div className="bottom big-btn" onClick={this.submit.bind(this)}>
            Save
         </div>
        </div>
    )
  }
 
}
function mapStateToProps(state){
  return{ 
  }
}
function mapDispatchToProps(dispatch){
  return{
    actions:bindActionCreators(Actions,dispatch)
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(AccountEdit)


